---
layout: default
title: Furatto - Docs::Media Queries
---

<h1>Media queries</h1>
<p class="main-motto">When working with responsive media queries, Furatto will help you more than you may think. We have provided a set of helpful media query mixins with really cool names. Kudos to <a href="http://twitter.com/paranoida">Rafal Bromirski</a>.</p>

<hr />

<h3>Responsive queries at a glance.</h3>

<p>We have been working with rsponsive design for a while now, and the problem alwats is, we don't always remember the full syntax for let's say a set fo rules for a phone. It is a really pain when building responsive websites, most of the times media queries are the same and is a pain to keep writing them.</p>

<p>So based on <a href="http://twitter.com/paranoida">Rafal Bromirski</a> media queries we expose a set of handy media queries with more readable and rememberable names.</p>

<p>A quick example to define a set of css rules for a phone is provided below.</p>

<div class="row">
   <div class="col-6">
    <span class="code">Full media query</span>  
    <pre>
      <code>
  @media only screen and (min-width: 320px) and (max-width: 480px) {
    //Your set of rules
  } 
      </code>
    </pre>
   </div>
   <div class="col-6">
    <span class="code">Furatto mixin</span>
    <pre>
      <code>
  .class-name {
    //Regular css rules
    
    @include phone {
      //Your awesome respnsive rules. Cool isn't it?
    }
  } 
      </code>
    </pre>
   </div>
</div>

<hr />

<h3>Getting to know them all</h3>

<p>Here is a quick list on the media queries that Furatto supports, but if you feel brave, you can always follow the <a href="https://github.com/IcaliaLabs/furatto/blob/master/scss/furatto/_media_queries.scss">source</a>. Your responsive development would never be the same.</p>

<table class="responsive">
  <thead>
    <tr>
      <th>Mixin name</th>
      <th>Params</th>
      <th>Source</th>
    </tr>
  </thead>
  <tbody>
  <tr>
    <td>screen</td>
    <td>
      <p><strong>$resMin</strong> - The minimal resolution width</p>
      <p><strong>$resMax</strong> - The max resolution width</p>
    </td>
    <td>
      <pre>
           <code>
  @media #{$media-display} and (min-width: $resMin) and (max-width: $resMax)
           </code>
      </pre>
    </td>
  </tr>
  <tr>
    <td>max-screen</td>
    <td>
      <p><strong>$res</strong> - The max resolution width</p>
    </td>
    <td>
      <pre>
           <code>
  @media #{$media-display} and (max-width: $res)
           </code>
      </pre>
    </td>
  </tr>
  <tr>
    <td>min-screen</td>
    <td>
      <p><strong>$res</strong> - The minimal resolution width</p>
    </td>
    <td>
      <pre>
           <code>
  @media #{$media-display} and (min-width: $res)
           </code>
      </pre>
    </td>
  </tr>
  <tr>
    <td>screen-height</td>
    <td>
      <p><strong>$resMin</strong> - The minimal resolution height</p>
      <p><strong>$resMax</strong> - The max resolution height</p>
    </td>
    <td>
      <pre>
           <code>
  @media #{$media-display} and (min-height: $resMin) and (max-height: $resMax)
           </code>
      </pre>
    </td>
  </tr>
  <tr>
    <td>max-screen-height</td>
    <td>
      <p><strong>$res</strong> - The max resolution height</p>
    </td>
    <td>
      <pre>
           <code>
  @media #{$media-display} and (max-height: $res)           
          </code>
      </pre>
    </td>
  </tr>
  <tr>
    <td>min-screen-height</td>
    <td>
      <p><strong>$res</strong> - The minimal resolution height</p>
    </td>
    <td>
      <pre>
           <code>
  @media #{$media-display} and (min-height: $res)
           </code>
      </pre>
    </td>
  </tr>
  <tr>
    <td>hdpi</td>
    <td>
      <p><strong>$ratio</strong> - The ratio value. <strong>Default: 1.3</strong></p>
    </td>
    <td>
      <pre>
           <code>
 @media only screen and (-webkit-min-device-pixel-ratio: $ratio),
  only screen and (min--moz-device-pixel-ratio: $ratio),
  only screen and (-o-min-device-pixel-ratio: #{$ratio}/1),
  only screen and (min-resolution: #{round($ratio*96)}dpi),
  only screen and (min-resolution: #{$ratio}dppx)
           </code>
      </pre>
    </td>
  </tr>
  <tr>
    <td>phone</td>
    <td>
      N/A
    </td>
    <td>
      <pre>
           <code>
  @media #{$media-display} and (min-width: $deviceMinWidth) and (max-width: $deviceMaxWidth)
           </code>
      </pre>
    </td>
  </tr>
  <tr>
    <td>iphone4</td>
    <td>
      <p><strong>$orientation</strong> - The iphone orientation. <strong>Default: all</strong></p>
    </td>
    <td>
      <pre>
           <code>
  @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth)
    and (-webkit-device-pixel-ratio: $devicePixelRatio) and (device-aspect-ratio: $deviceAspectRatio)
           </code>
      </pre>
    </td>
  </tr>
  <tr>
    <td>iphone5</td>
    <td>
      <p><strong>$orientation</strong> - The iphone orientation. <strong>Default: all</strong></p>
    </td>
    <td>
      <pre>
           <code>
    @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth)
    and (-webkit-device-pixel-ratio: $devicePixelRatio) and (device-aspect-ratio: $deviceAspectRatio)
           </code>
      </pre>
    </td>
  </tr>
  <tr>
    <td>ipad</td>
    <td>
      <p><strong>$orientation</strong> - The iphone orientation. <strong>Default: all</strong></p>
    </td>
    <td>
      <pre>
           <code>
  @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth)
           </code>
      </pre>
    </td>
  </tr>
  <tr>
    <td>ipad-retina</td>
    <td>
      <p><strong>$orientation</strong> - The iphone orientation. <strong>Default: all</strong></p>
    </td>
    <td>
      <pre>
           <code>
  @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth)
  and (-webkit-device-pixel-ratio: $devicePixelRatio)
           </code>
      </pre>
    </td>
  </tr>
  </tbody>
</table>

<blockquote class="primary">
  <h4>Follow the source</h4>
  <p>We just scratch the surface of the media queries, for you to get started, but you ae always welcome to check out the <a href="https://github.com/IcaliaLabs/furatto/blob/master/scss/furatto/_media_queries.scss">source file</a>, for further functionality.</p>
</blockquote>
